import React from 'react';
import { Outlet } from 'react-router-dom';
import { Layout, theme } from 'antd';
import './index.scss'
import Header from '@/components/layout/Header.jsx';
import Sider from '@/components/layout/Sider.jsx';
import TabList from '@/components/layout/TabList.jsx';
const { Content } = Layout;
const Home = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout className='layout'>
      <Header></Header>
      <Layout>
        <Sider></Sider>
        <Layout
          style={{
            padding: '0 24px 24px',
          }}
        >
          <TabList />
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};
export default Home;